<template>
    <div class="playlist w">
        <div class="cat" v-if="playListCat != null">
            <div
            :key="index"
            v-for="(item, index) in playListCat" 
            class="cat-item">
                <div class="title">{{item}}</div>
                <div class="cat-list">
                    <div
                    :key="index2"
                    v-for="(item2, index2) in playListArray[index]" 
                    class="list-item">
                        <span
                        @click="newPlayList(item2.name)"
                        :class="currentCat == item2.name ? 'current-cat' : ''">{{item2.name}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="current-title">
            {{currentCat}}（精选）
        </div>

        <div class="playsong" v-if="playListInfo != null">
            <div
            :key="index"
            v-for="(item, index) in playListInfo"
            class="song-item">
                <div class="pic">
                    <div @click="playSongListAll(item)" class="mask">
                        <span class="iconfont">&#xe682;</span>
                    </div>
                    <img :src="item.coverImgUrl">
                </div>
                <div @click="jumpPlayListInfo(item.id)" class="name">{{item.name}}</div>
                <div class="author">{{item.creator.nickname}}</div>
                <div class="number">播放量：{{item.playCount}}</div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 当前被选中的歌单分类
            currentCat: '全部歌单',
            // 歌单分类
            playListCat: null,
            // 歌单分类组别
            playListArray: [],
            // 获取歌单参数
            params: {
                cat: '全部',
                limit: 20
            },
            // 分类
            playListInfo: null
        }
    },
    mounted() {
        this.getPlayListCat();
        this.getPlayList();
    },
    methods: {
        // 获取歌单分类信息
        async getPlayListCat() {
            var tempArray0 = [];
            var tempArray1 = [];
            var tempArray2 = [];
            var tempArray3 = [];
            var tempArray4 = [];
            let { data: res } = await this.$http.get('/playlist/catlist');
            this.playListCat = res.categories;
            res.sub.forEach((item, index) => {
                if (item.category == 0)
                    tempArray0.push(item);
                if (item.category == 1)
                    tempArray1.push(item);
                if (item.category == 2)
                    tempArray2.push(item);
                if (item.category == 3)
                    tempArray3.push(item);
                if (item.category == 4)
                    tempArray4.push(item);
            });
            this.playListArray = [[...tempArray0],[...tempArray1],[...tempArray2],[...tempArray3],[...tempArray4]]
        },
        // 获取分类歌单
        async getPlayList() {
            let { data: res } = await this.$http.get('/top/playlist', { params: this.params });
            this.playListInfo = res.playlists;
        },
        // 切换歌单
        newPlayList(name) {
            this.currentCat = name;
            this.params.cat = name;
            this.getPlayList();
        },
        // 播放歌单全部歌曲
        async playSongListAll(item) {
            let { data: res } = await this.$http.get('/playlist/detail', { params: { id: item.id } });
            this.$emit('playSongAll', res.playlist.tracks);
            this.$router.push(`/playlist/info/${item.id}`);
        },
        // 跳转到歌单详情
        jumpPlayListInfo(id) {
            this.$router.push(`/playlist/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.playlist {
    padding-top: 50px;
}
.cat {
    display: flex;
    .cat-item {
        flex: 1;
        padding: 0 20px;
        border-right: 1px solid #ccc;
        &:nth-last-child(1) {
            border-right: none;
        }
        .title {
            margin-bottom: 10px;
            font-size: 14px;
            color: #999;
            padding-left: 10px;
        }
        .cat-list {
            display: flex;
            flex-wrap: wrap;
            .list-item {
                width: 50%;
                color: #000;
                font-size: 14px;
                margin-bottom: 8px;
                span {
                    display: inline-block;
                    text-align: center;
                    padding: 0 10px;
                    line-height: 30px;
                    height: 30px;
                    cursor: pointer;
                    
                    &:hover {
                        color: #3ec481;
                    }
                }
            }
        }
    }
}

.current-cat {
    color: #fff!important;
    background-color: #3ec481!important;
}

.current-title {
    font-size: 26px;
    margin-top: 30px;
    padding-left: 10px;
}

.playsong {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    justify-content: space-between;
    .song-item {
        flex: 20%;
        margin-bottom: 30px;
        .pic {
            position: relative;
            width: 220px;
            height: 200px;
            cursor: pointer;
            &:hover .mask {
                display: block;
            }
            .mask {
                display: none;
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .4);
                &:hover .iconfont {
                    font-size: 50px;
                    opacity: 1;
                }
                .iconfont {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 10px;
                    color: #fff;
                    transition: all .3s;
                    font-weight: 700;
                    opacity: 0;
                }
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        .name {
            margin-top: 12px;
            font-size: 14px;
            color: #000;
            width: 220px;
        }
        .author {
            color: #999;
            font-size: 14px;
            margin: 4px 0;
        }
        .number {
            color: #999;
            font-size: 14px;
        }
        .name,
        .author {
            cursor: pointer;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:hover {
                color: #3ec481;
            }
        }
    }
}
</style>